<template>
  <div style="padding: 6px;">
    <el-form ref="searchForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="Order No">
            <el-input v-model="sd.orderno" size="small" placeholder="Order No" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Title">
            <el-input v-model="sd.title" size="small" placeholder="Title" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button class="mt_5" type="primary" size="mini" icon="el-icon-search" @click="searchOrder">search</el-button>
          <el-button class="mt_5" type="primary" size="mini" icon="el-icon-plus" @click="addOrder">add</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="16">
      <el-col :span="6" v-for="(item,index) in orderObj.list" :key="item.id + '-' + index">
        <el-card class="box-card">
          <div slot="header">
            <span style="font-size: 18px;font-weight: bold">{{item.orderno}}</span>
            <a href="javascript:;" style="float: right" @click="orderView(item.id)">Order View</a>
          </div>
          <div class="divnr">Order Title：<span>{{item.title}}</span></div>
          <div class="divnr">Customer Name：<span>{{item.kehuusername}}</span></div>
          <div class="divnr">
            Expected Completion Date：<span><DateFormat :value="item.completedate" :format="'YYYY-MM-DD'"></DateFormat></span>
          </div>
          <div style="width: 80%;padding:10px 0 10px 2%">
            <el-progress :text-inside="true" :stroke-width="26" :percentage="item.speed" :status="item.speed >80?'success':item.speed>60?'':'warning'" ></el-progress>
          </div>
          <div class="cardfooter">
            <el-button size="mini" type="primary" @click="editOrder(item.id)">edit</el-button>
            <el-button size="mini" type="warning" @click="scheduleOrder(item.id)">produce</el-button>
            <el-button size="mini" type="warning" @click="logisticsOrder(item.id)">logistics</el-button>
            <el-popconfirm style="margin-left: 8px;" confirmButtonText='ok' cancelButtonText='cancel'
                           icon="el-icon-info" iconColor="red"
                           title="confirm delete?" @confirm="deleteOrder(item.id)">
              <el-button slot="reference"  size="mini" type="danger">delete</el-button>
            </el-popconfirm>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination v-if="orderObj.total>sd.pageSize" class="center" background layout="total, prev, pager, next"
                   @current-change="loadOrder" :total="orderObj.total"
                   :current-page.sync="sd.pageNum" :page-size="sd.pageSize">
    </el-pagination>
    <el-dialog :title="popupTitle" :visible.sync="entityDetailVisible" width="96%">
      <orderdetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :entityId="popupEntityId"></orderdetail>
    </el-dialog>
    <el-dialog :title="popupTitle" :visible.sync="entityScheduleVisible" width="66%">
      <orderschedule v-if="entityScheduleVisible" :visible.sync="entityScheduleVisible" :entityId="popupEntityId"></orderschedule>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import orderdetail from "./orderdetail";
import orderschedule from "./orderschedule";
export default {
  components : {orderdetail, orderschedule},
  data() {
    return {
      sd: {
        orderno : '',
        title : '',
        pageNum: 1,
        pageSize: 12
      },
      orderObj: {},
      entityDetailVisible : false,
      entityScheduleVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadOrder()
    this.$EventBus.$on("orderadd", () => {
      this.sd.pageNum = 1;
      this.loadOrder();
    });
    this.$EventBus.$on("orderedit", () => {
      this.loadOrder();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("orderadd")
    this.$EventBus.$off("orderedit")
  },
  methods: {
    searchOrder(){
      this.sd.pageNum = 1;
      this.loadOrder();
    },
    loadOrder() {
      request({
        url: '/emp/order/pageorder',
        data: this.sd
      }).then(res => {
        const { data } = res
        this.orderObj = data
      })
    },
    addOrder(){
      this.popupEntityId = 0;
      this.popupTitle= "add Order"
      this.entityDetailVisible= true
    },
    editOrder(id){
      this.popupEntityId= id;
      this.popupTitle= "edit Order"
      this.entityDetailVisible= true
    },
    scheduleOrder(id){
      this.popupEntityId= id;
      this.popupTitle= "schedule Order"
      this.entityScheduleVisible= true
    },
    deleteOrder(id){
      request({
        url: '/emp/order/deleteorder',
        data: {id : id}
      }).then(res => {
        this.loadOrder();
      })
    },
    logisticsOrder(orderId){
      this.$router.push({path: '/publicnav/orderlogistics', query :{orderId : orderId} })
    },
    orderView(orderId){
      this.$router.push({path: '/publicnav/orderinfo', query :{orderId : orderId} })
    }
  }
}
</script>

<style lang="scss" scoped>
div.divnr{
  text-indent: 16px;
  font-size: 14px;
  color: #666666;
  height: 30px;
  line-height: 30px;
}
div.cardfooter{
  text-align: right;
  padding-bottom: 5px;
  padding-right: 5px;
}
</style>
